import { TreeSelect } from 'antd';
import React, { useState,useEffect } from 'react';
const { SHOW_PARENT } = TreeSelect;
const treeData = [
  {
    title: '系统设置',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: '菜单管理',
        value: '0-0-0',
        key: '0-0-0',
      },
      {
        title: '修改密码',
        value: '0-0-1',
        key: '0-0-1',
      }
    ],
  },
  {
    title: '权限设置',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: '角色管理',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: '用户管理',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: '部门管理',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
  {
    title: '公共信息',
    value: '0-2',
    key: '0-2',
    children: [
      {
        title: '信息管理',
        value: '0-2-0',
        key: '0-2-0',
      }
    ],
  },
  {
    title: '个人办公',
    value: '0-3',
    key: '0-3',
    children: [
      {
        title: '我的便签',
        value: '0-3-0',
        key: '0-3-0',
      },
      {
        title: '我的任务',
        value: '0-3-1',
        key: '0-3-1',
      }
    ],
  },
  {
    title: '人事管理',
    value: '0-4',
    key: '0-4',
    children: [
      {
        title: '员工信息管理',
        value: '0-4-0',
        key: '0-4-0',
      },
      {
        title: '考勤记录管理',
        value: '0-4-1',
        key: '0-4-1',
      }
    ],
  },
];

const TreeSelects = ({ onChangRolePrivileges, rolePrivileges }) => {
  const [value, setValue] = useState([]);
  useEffect(()=>{
    setValue(rolePrivileges)
  }, [rolePrivileges])
  const onChange = (newValue,label, extra) => {
    setValue(newValue);
    onChangRolePrivileges(newValue)
  };

  const tProps = {
    treeData,
    value,
    onChange,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: '请选择用户使用权限',
    style: {
      width: '360px',
    },
  };
  return <TreeSelect {...tProps} />;
};

export default TreeSelects;